<template>
  <div id="app">
    <Tabbar :key="tabBarKey"></Tabbar>
    <Header></Header>
    <router-view/>
    <Footer></Footer>
    <login v-show="isShowLoginModal"></login>
    <transition name="slide">
      <Toast v-show="isShowToast"></Toast>
    </transition>
  </div>
</template>
<script>
import Tabbar from "./components/Tabbar.vue"
import Header from "./components/Header.vue"
import Footer from "./components/Footer.vue"
import login from "./components/login.vue"
import Toast from "./components/Toast.vue"
// import axios from "./request/request.js"
import { JingpinAPI, ReMenAPI } from "@/request/api.js";
import { mapState } from 'vuex'
export default {
  components:{
    Tabbar,
    Header,
    Footer,
    login,
    Toast
  },
  data(){
    return{
      tabBarKey:0
    }
  },
  methods:{
    updateKeyFn(){
      this.tabBarKey++
    }
  },
  watch:{
    "$route.path":{
      handler(newVal,oldVal){
        if(newVal,oldVal){
          console.log("重载");
          this.tabBarValue++
        }
      }
    }
  },
  computed:{
    ...mapState({
      isShowLoginModal: state => state.showModal.isShowLoginModal,
      isShowToast: state => state.showToast.isShowToast
    })
  },
  async created(){
    // axios.get("http://kumanxuan1.f3322.net:8881/cms").then(res =>{
    //   console.log(res);
    // })
    // JingpinAPI().then(res => {
    //   console.log(res);
    // });
    // ReMenAPI().then(res => {
    //   console.log(res);
    // });
    let res1 = await JingpinAPI();
    console.log("res1:", res1);
    // let res2 = await ReMenAPI();
    // console.log("res2", res2);
  },
  watch:{
    "$route.path":{
      handler(newVal,oldVal){
        if(newVal != oldVal){
          console.log("key变化了");
          this.tabBarKey++;
        }
      }
    }
  },
  async created(){
    console.log("环境变量值：",process.env.VUE_APP_BASE_URL);
    console.log("环境变量值：",process.env.VUE_APP_TEST_NAME);
  }
}
</script>
<style lang="less">
.slide-enter,
.slide-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: opacity 0.3s linear;
}

.slide-enter-to,
.slide-leave {
  opacity: 1;
}
</style>
